import useTitle from '@/hooks/useTitle'
import {
    useState
} from 'react';
import {
    Image,
    Cell,
    CellGroup,
    ActionSheet,
    Dialog,
    Toast
} from 'react-vant'
import {
    ServiceO,
    StarO,
    SettingO,
    CartO,
    Upgrade,
    PhoneO,
    ShareO
} from '@react-vant/icons'
import styles from './profile.module.css';

const Profile = () => {
    // 用户信息状态
    const [userInfo, setUserInfo] = useState({
        nickname: '哈基米',
        level: '3级',
        avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
    })
    
    useTitle("我的")
    
    // 控制操作表和对话框显示
    const [showActionSheet, setShowActionSheet] = useState(false);
    const [showEditDialog, setShowEditDialog] = useState(false);
    
    // 编辑用户信息的临时状态
    const [tempUserInfo, setTempUserInfo] = useState({...userInfo});
    
    // 处理头像操作
    const handleAction = (action) => {
        setShowActionSheet(false);
        
        if (action.name === 'AI生成头像') {
            Toast.info('AI生成头像功能待实现');
        } else if (action.name === '上传头像') {
            Toast.info('上传头像功能待实现');
        }
    }
    
    // 操作选项
    const actions = [
        {
            name: 'AI生成头像',
            color: '#1989fa',
            type: 1
        },
        {
            name: '上传头像',
            color: '#07c160',
            type: 2
        }
    ]
    
    // 统计数据
    const stats = [
        { title: '足迹', value: '567' },
        { title: '关注', value: '3' },  // 改为"关注"并调整位置
        { title: '收藏', value: '8' }
    ];
    
    // 菜单数据
    const menuData = [
        { icon: <StarO />, title: '好价订阅' },
        { icon: <Upgrade />, title: '升级会员' },
        { icon: <CartO />, title: '购买记录' },
        { icon: <ServiceO />, title: '帮助反馈' },
        { icon: <PhoneO  />, title: '在线客服' },
        { icon: <ShareO  />, title: '分享APP' },
        { icon: <SettingO />, title: '系统设置' }
    ];
    // 处理编辑用户信息
    const handleEditInfo = () => {
        setTempUserInfo({...userInfo});
        setShowEditDialog(true);
    }
    // 保存用户信息
    const handleSaveInfo = () => {
        setUserInfo({...tempUserInfo});
        setShowEditDialog(false);
        Toast.success('保存成功');
    }
    
    // 退出登录处理函数
    const handleLogout = () => {
        Dialog.confirm({
            title: '确认退出',
            message: '确定要退出登录吗？',
            confirmButtonText: '退出',
            cancelButtonText: '取消'
        }).then(() => {
            // 这里添加实际的退出登录逻辑
            Toast.success('已退出登录');
            // 可以添加跳转到登录页的代码
        }).catch(() => {
            // 取消退出
        });
    }
    return (
        <div className={styles.container}>
            {/* 用户信息区域 */}
            <div className={styles.userHeader}>
                <div className={styles.userInfo}>
                    <Image 
                        round
                        width="80px"
                        height="80px"
                        src={userInfo.avatar}
                        className={styles.avatar}
                        onClick={() => setShowActionSheet(true)}
                    />
                    <div className={styles.userDetails}>
                        <div className={styles.nickname}>{userInfo.nickname}</div>
                        <div className={styles.levelContainer}>
                            <button className={styles.btnGrade}>我的等级</button>
                            <span className={styles.level}>{userInfo.level}</span>
                        </div>
                    </div>
                </div>
                
                {/* 统计区域 */}
                <div className={styles.statsContainer}>
                    {stats.map((item, index) => (
                        <div key={index} className={styles.statItem}>
                            <div className={styles.statValue}>{item.value}</div>
                            <div className={styles.statTitle}>{item.title}</div>
                        </div>
                    ))}
                </div>
            </div>
            
            {/* 菜单区域 */}
            <div className={styles.menuSection}>
                <CellGroup>
                    {menuData.map((item, index) => (
                        <Cell 
                            key={index}
                            title={item.title}
                            icon={item.icon}
                            isLink 
                            center
                        />
                    ))}
                </CellGroup>
            </div>

            {/* 添加独立的退出登录按钮 */}
            <Cell 
                title="退出登录"
                className={styles.logoutButton}
                onClick={handleLogout}
                center
            />
            
            {/* 头像操作面板 */}
            <ActionSheet
                visible={showActionSheet}
                actions={actions}
                cancelText='取消'
                onCancel={() => setShowActionSheet(false)}
                onSelect={handleAction}
            />
            
            {/* 编辑用户信息对话框 */}
            <Dialog 
                visible={showEditDialog}
                title="编辑个人信息"
                onCancel={() => setShowEditDialog(false)}
                onConfirm={handleSaveInfo}
                cancelButtonText="取消"
                confirmButtonText="保存"
            >
                <div className={styles.editForm}>
                    <div className={styles.formItem}>
                        <span>昵称：</span>
                        <input 
                            value={tempUserInfo.nickname}
                            onChange={(e) => setTempUserInfo({...tempUserInfo, nickname: e.target.value})}
                            className={styles.input}
                        />
                    </div>
                </div>
            </Dialog>
        </div>
    )
}

export default Profile
